<template>
	<view class="storeType-container">
		<c-navigation-bar :bgColor="true" :title="$t('storeManagement.SelectStore')" @backEvent="goBack" ></c-navigation-bar>
		<view class="container">
		
			<view class="store-type-title">
				<p>{{$t('storeManagement.Personalinformation')}}</p>
			</view>
			<view class="menu-item" @click="fillingProcedure('personalStep1')"
				:class="isAccomplishps1?$t('storeManagement.Completed'):$t('storeManagement.Incomplete')">
				<view class="">
					{{$t('storeManagement.Gharpure')}}
				</view>
				<view class="right-arrow-icon">
					<view>{{isAccomplishps1?$t('storeManagement.Completed'):$t('storeManagement.Incomplete')}}</view>
					<image style="height:100%;width:12rpx;" src="@/static/images/user/right-arrow.png">
				</view>
			</view>
			<view class="store-type-title">
				<p>{{$t('storeManagement.shopinformation')}}</p>
			</view>
			<view class="menu-item" @click="fillingProcedure('personalStep2')"
				:class="isAccomplishps2?$t('storeManagement.Completed'):$t('storeManagement.Incomplete')">
				<view class="">
					{{$t('storeManagement.Gharpure')}}
				</view>
				<view class="right-arrow-icon">
					<view>{{isAccomplishps2?$t('storeManagement.Completed'):$t('storeManagement.Incomplete')}}</view>
					<image style="height:100%;width:12rpx;" src="@/static/images/user/right-arrow.png">
				</view>
			</view>
			<view class="htmlBox">
				<u-parse :html="content"></u-parse>
			</view>
			<!-- <u-empty text="Licenseupload" iconSize="52" mode="list" margin-top='48' class='stroeEmptuy'></u-empty> -->
			<button class="submit-exchange-rate" :disabled="!(isAccomplishps1&&isAccomplishps2)" style="    position: absolute;bottom: 40rpx;left:  40rpx;right: 40rpx;"
				@click="fillingProcedure('personalPrevlew')" type="default">{{$t('system.Submit')}}</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				storeTypeList: ['Personal', 'Partner', 'Flagship', 'Enterprise'],
				activeStoreType: 'Personal',
				isAccomplishps1: '',
				isAccomplishps2: '',
				content: '',
			};
		},
		onLoad() {
			this.$u.get('/app/language/text/info/9dc49fb6375e45e3a72eac8439fedb3b').then(res => {
					this.content=res.data
			})
			
			this.isAccomplishps1 = Number(uni.getStorageSync('isAccomplishps1'))
			this.isAccomplishps2 = Number(uni.getStorageSync('isAccomplishps2'))
		},
		methods: {

			goBack() {
			uni.navigateTo({
				url: "/pages/storeIntroduction/storeIntroduction" 
			})
			
			},
			fillingProcedure(page) {
				uni.navigateTo({
					url: "/pages/storyType/" + page
				})
				// this.$u.post('/app/shop', data).then(res => {
				// 	this.$u.toast('申请成功')
				// 	setTimeout(()=>{
				// 		uni.switchTab({
				// 			url: "/pages/user/user",
				// 			animationType: 'slide-in-bottom	',
				// 			animationDuration: 200
				// 		})
				// 	},700)
				
				// })
			}
		},
	}
</script>

<style lang="scss" scoped>
	.storeType-container {

		.container {
			padding: 0rpx 40rpx;
			margin-top: 50rpx;
			min-height: 86vh;
			position: relative;

			.store-type-title {
				margin-top: 50rpx;
				font-size: 32rpx;
			}
    .htmlBox {
    margin-top: 26px;
    height: 40vh;
    overflow: scroll;
}
			// 店铺类型
			.check-store-type {
				display: flex;
				margin-top: 50rpx;

				.check-btn {
					width: 90px;
					height: 32px;
					background: #F5F6F8;
					border-radius: 10px 10px 10px 10px;
					line-height: 32px;
					font-size: 12px;

					color: #C9C9C9;
					text-align: center;
					opacity: 1;

					&:not(:last-child) {
						margin-right: 20rpx;
					}

					&.is-active {
						color: #fff;
						background-color: #2935d0;
					}
				}

			}

			.menu-item {

				height: 120rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 42rpx;
				border-radius: 30rpx;
				opacity: 1;
				margin-top: 48rpx;
				border: 1px solid #000000;
				color: #999CAD;

				&:not(:last-child) {
					margin-bottom: 20rpx;
				}

				.right-arrow-icon {
					height: 20rpx;
					width: 160rpx;
					height: 10px;
					font-size: 12px;
					justify-content: space-between;
				}

				view {
					display: flex;
					align-items: center;

					>.tab-button {
						flex: 1;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 28rpx;
						color: #fff;
						transition: 0.2s;

						&.is-active {
							background-color: #2934D0;
						}
					}
				}

			}

			.Completed {
				color: #000 !important;

				.right-arrow-icon {
					color: #2934D0 !important;
				}
			}

			.stroeEmptuy {
				height: 98px;
				border-radius: 20rpx;
				border: 1px solid #E8E6EA;
			}
		}

	}
</style>
